<#assign ctx=request.contextPath/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登陆</title>
		<link rel="stylesheet" href="${ctx}/css/bootstrap.css" />
		<link rel="stylesheet" href="${ctx}/css/common.css" />
		<link rel="stylesheet" href="${ctx}/css/login.css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js" ></script>	
	</head>
<body style="background:#f0f0f0;">
	<header class="header">
		<div class="logo center clear">
			<a href="index.html"><img src="${ctx}/images/logo.png" /></a>
		</div>
	</header>
	<article class="content">
		<div class="center">
			<div class="login_top">
				<h4>用户登录</h4>
			</div>
			<div class="login_middle clear">
				<form class="login_left">
					<p class="p1">
						<label class="login">登录账号：
							<input type="text" id="username" name="userId" 
									placeholder="用户名/已验证手机"/>
						</label>
					</p>
					<p  class="p2">
						<label class="password">密码：
							<input type="password" id="password" name="pwd" placeholder="密码"/>
							</label>
					</p>
				<div class="row cl">
			        <div class="formControls col-xs-8 col-xs-offset-3">
			          <input id="code" name="code" class="input-text size-L" type="text" placeholder="验证码" onblur="if(this.value==''){this.value='验证码:'}" onclick="if(this.value=='验证码:'){this.value='';}"  style="width:110px;">
			          <img  style="display: inline-block;" id="vimg" src="${ctx}/CheckController"> <a id="kanbuq" href="javascript:;">看不清，换一张</a> </div>
			     	<script type="text/javascript">
			     		$(function(){
			     			$("#vimg").click(function(){
			     				$("#vimg").attr("src","${ctx}/CheckController?"+Math.random());
			     			});
			     			$("#kanbuq").click(function(){
			     				$("#vimg").attr("src","${ctx}/CheckController?"+Math.random());   				
			     			});
	
			    			/** 为表单绑定onsubmit提交事件 */
			    			$("form[class='login_left']").submit(function(){
			    				/** 做表单输入校验 */
			    				var userId = $("#username");
			    				var pwd = $("#password");
			    				var code = $("#code");
			    				//是否记住密码
			    				var rember = $("#rember:checked");
			    				/*  var rember = $("#rember"); */
			    				var tip = "";
			    				if ($.trim(userId.val()) == ""){
			    					tip = "账号不能为空！";
			    					userId.focus();// 调用文本框获取焦点方法
			    				}else if (!/^\w{5,20}$/.test($.trim(userId.val()))){
			    					tip = "账号格式不正确！";
			    					userId.focus();// 调用文本框获取焦点方法
			    				}else if ($.trim(pwd.val()) == ""){
			    					tip = "密码不能为空！";
			    					pwd.focus();// 调用文本框获取焦点方法
			    				}else if (!/^\w{6,20}$/.test($.trim(pwd.val()))){
			    					tip = "密码格式不正确！";
			    					pwd.focus();// 调用文本框获取焦点方法
			    				}else if ($.trim(code.val()) == ""){
			    					tip = "验证码不能为空！";
			    					code.focus();// 调用文本框获取焦点方法
			    				}else if (!/^[a-zA-Z0-9]{4}$/.test($.trim(code.val()))){
			    					tip = "验证码格式不正确！";
			    					code.focus();// 调用文本框获取焦点方法
			    				}else if(rember.attr("checked") == "checked"){
			    					rember.val("1");
			    				}
			    				
			    				
			    				/** 判断表单是否通过校验 */
			    				if (tip == ""){
			    					console.log("发送ajax请求");
			    					/* var rember = $("#rember").val(); */
			    					//alert(userId.val()+"--"+pwd.val()+"--"+code.val()+"--"+rember.val())
			    					//发送ajax登录请求
									$.post("${ctx}/customer/login",{"userId":userId.val(),"pwd":pwd.val(),"code":code.val(),"rember":rember.val()},function(data){
										 
										if(data.status == "success"){
				    					    	//登录成功，跳转到主页
				    					    	location.href="${ctx}/customer/home";
				    					    }else if(data.status == "fail"){
				    					    	//提示
				    					    	alert(data.tip);
				    					    	$("#vimg").attr("src","${ctx}/CheckController?"+Math.random());
				    					    }else{
				    					    	alert("网络错误!");
				    					    }
									});
			    					return false;
			    					/* return true; 提交表单，开始访问form表单中action属性中的url地址*/
			    				}else{
			    					alert(tip);
			    					return false;
			    				}
			    			});
			     			
			     			
			     		});
			     	</script>
			      </div>
					<p class="clear p3">
						<label class="remember" id="auto_login">
							<input id="rember" value="1" type="checkbox"/><em>记住密码</em>
							</label>
						<a class="forget" href="#">忘记密码</a>
						</p>
					<p class="p4">
						<input type="submit" value="立即登录" id="submit">
					</p>
					<p class="p5">
						<a href="register.html">注册新用户</a>
					</p>
				</form>
				<div class="login_right">
					<p class="p1">
						<span>扫描登录</span>
					</p>
					<p class="p2">
						<img src="${ctx}/images/wei.jpg" />
					</p>
					<p class="p3">
						<img src="${ctx}/images/xin.jpg" />
					</p>
					<p class="p4 clear">
						<span>打开手机扫二维码</span>
					</p>
					<p class="p5">
						<span class="s1"><img src="${ctx}/images/icon-1.png" />免输入</span>
						<span class="s2"><img src="${ctx}/images/icon-2.png" />更快</span>
						<span class="s3"><img src="${ctx}/images/icon-3.png" / >更安全</span>
					</p>
				</div>
			</div>	
		 </div>
	</article>
	<footer class="footer clear">
			<div class="footer_top center">
				<ul>
					<li>
						<img src="${ctx}/images/good.png" />
						<div class="right">
							<h4>品质保障</h4>
							<p>品质护航 购物无忧</p>
						</div>
					</li>
					<li>
						<img src="${ctx}/images/seven.png" />
						<div class="right">
							<h4>7天无理由退货</h4>
							<p>为你提供售后无忧保障</p>
						</div>
					</li>
					<li>
						<img src="${ctx}/images/number.png" />
						<div class="right">
							<h4>15天免费换货</h4>
							<p>只要不满意 免费换货</p>
						</div>
					</li>
					<li>
						<img src="${ctx}/images/specile.png"/>
						<div class="right">
							<h4>特色服务体验</h4>
							<p>为你呈现不一样的服务</p>
						</div>
					</li>

					<li>
						<img src="${ctx}/images/phone.png" />
						<div class="right">
							<h4>售后电话</h4>
							<p>24h全国服务热线</p>
						</div>
					</li>
				</ul>
			</div>	
			<div class="footer_middle clear center">
				<div class="left">
					<dl>
						<dt>新手指南</dt>
						<dd><a href="#">宏恒后视镜</a></dd>
						<dd><a href="#">宏恒记录仪</a></dd>
						<dd><a href="#">宏恒电子狗</a></dd>
						<dd><a href="#">宏恒导航仪</a></dd>
						<dd><a href="#">周边配件</a></dd>
					</dl>
					<dl>
						<dt>服务下载</dt>
						<dd><a href="#">软件下载</a></dd>
						<dd><a href="#">地图升级</a></dd>
						<dd><a href="#">升级下载</a></dd>
						<dd><a href="#">轨迹查询</a></dd>
					</dl>
					<dl>
						<dt>关于宏恒</dt>
						<dd><a href="#">了解宏恒</a></dd>
						<dd><a href="#">宏恒故事</a></dd>
						<dd><a href="#">公司新闻</a></dd>
						<dd><a href="#">行业动态</a></dd>
						<dd><a href="#">联系我们</a></dd>
					</dl>
					<dl>
						<dt>帮助中心</dt>
						<dd><a href="#">售后流程</a>	</dd>
						<dd><a href="#">退换政策</a>	</dd>
						<dd><a href="#">免责条款</a>	</dd>
						<dd><a href="#">售后咨询</a>	</dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd><a href="#">购物指南</a>	</dd>
						<dd><a href="#">支付方式</a>	</dd>
						<dd><a href="#">订单状态</a>	</dd>
						<dd><a href="#">隐私保护</a>	</dd>	
					</dl>
				</div>
				<div class="right">
					<div class="picture">
						<img src="${ctx}/images/picture.jpg"/>
						<span>微信二维码</span>
					</div>
					<div class="server">
						<p>24小时全国服务热线</p>
						<p>400-666-8888</p>
						<button>在线服务</button>
					</div>
				</div>
			</div>
   			<div class="footer_bottom clear">
		    	<p>Copyright © 2003-2017 hongheng.COM 版权所有</p>
		        <p>客服邮箱: 20888888@qq.com ICP备案证书号:粤ICP备88888888号-8</p>
		        <ul class="bottom">
		        	<li><a href="#"><img src="${ctx}/images/bottom-1.jpg" /></a></li>
		        	<li><a href="#"><img src="${ctx}/images/bottom-2.jpg" /></a></li>
		        	<li><a href="#"><img src="${ctx}/images/bottom-3.jpg" /></a></li>
		        </ul>
    		</div>
    	</footer>

